---
title: Cursor Overlay
description: Overlay a cursor indicator for collaborative editing or real-time interaction.
component: true
---

## Installation

<Tabs defaultValue="cli">

<TabsList>
<TabsTrigger value="cli">CLI</TabsTrigger>
<TabsTrigger value="manual">Manual</TabsTrigger>
</TabsList>
<TabsContent value="cli">

```bash
npx @udecode/plate-ui@latest add cursor-overlay
```

</TabsContent>

<TabsContent value="manual">

<Steps>

<Step>

Install the following dependencies:

```bash
npm install @udecode/plate-cursor
```

</Step>

<Step>

Copy and paste the following code into your project.

</Step>

<ComponentSource name="cursor-overlay" />

<Step>

Update the import paths to match your project setup.

</Step>

</Steps>

</TabsContent>

</Tabs>

## Examples

<ComponentPreview name="playground-demo" id="cursoroverlay" />

<ComponentSource src="../../templates/plate-playground-template/src/components/plate-editor.tsx" />

## API

### CursorOverlay

### useCursorOverlayPositions

### Types

```tsx
export type SelectionRect = {
  width: number;
  height: number;

  top: number;
  left: number;
};

export type CaretPosition = {
  height: number;

  top: number;
  left: number;
};

export type CursorState<TCursorData extends UnknownObject = UnknownObject> = {
  key?: any;
  selection: Range | null;
  data?: TCursorData;
};

export interface CursorOverlayState<TCursorData extends Record<string, unknown>>
  extends CursorState<TCursorData> {
  caretPosition: CaretPosition | null;
  selectionRects: SelectionRect[];
}

export type CursorData = {
  style?: CSSProperties;
  selectionStyle?: CSSProperties;
};
```
